<template>
    <div id="order_detial" v-if="orderItem">
        <div class="order_detial_code">
            <QrcodeVue :value="value" :size="size" level="H"></QrcodeVue>
            <span>订单二维码</span>
        </div>
        <Order :orderItem="orderItem" :orderType=3></Order>
        <div class="order_account" v-if="orderItem.receiptAccount || orderItem.receiptBank || orderItem.receiptName">
            <div v-if="orderItem.receiptBank"><span class="order_text">开户行名称 </span> <span class="order_content">{{orderItem.receiptBank}}</span></div>
            <div v-if="orderItem.receiptName"><span class="order_text">开户行名称 </span> <span class="order_content">{{orderItem.receiptName}}</span></div>
            <div v-if="orderItem.receiptAccount"><span class="order_text">账号</span><span class="order_content">{{orderItem.receiptAccount}}</span></div>
        </div>
        <div class="order_voucher" v-if="orderItem.status === 1 && orderItem.payMethod === 2">
            <el-upload
                    class="order_uploader"
                    :action="baseUrl + '/nu/client/file/upload'"
                    :headers="MyHeader"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="order_uploader_img">
                <img v-if="!imageUrl" src="./img/ic_upload.png" class="order_uploader_img"/>
            </el-upload>
            <span v-show="imageUrl">
        转账凭证已上传
      </span>
        </div>
        <div class="btnfooter">
            <orderBtn :orderType="1" :orderItem="orderItem" v-if="orderItem"></orderBtn>
        </div>
    </div>
</template>
<script>
    import {getQuery} from '@/utils/utils'
    import {getOrderDetail, uploadOrderImg} from '_common/services/order'
    import Order from '_components/order/order';
    import orderBtn from '_components/order/orderBtn'
    import base from '_common/services/base'
    import QrcodeVue from 'qrcode.vue'
    import {getCookie} from '@/utils/cookiesUtil.js'
    import wxLogin from '_common/wxLogin.js'
    export default {
        name: 'refund',
        data() {
            return {
                baseUrl: base.test,
                orderId: null,
                orderItem: null,
                dialogImageUrl: '',
                dialogVisible: false,
                imageUrl: '',
                isUpdate: false,
                value: window.location.href,
                size: 90,
                MyHeader: {cAuthToken: getCookie('token')},
            }
        },
        computed: {},
        async beforeMount() {
            await wxLogin(this.getData)
        },
        mounted(){
        },
        methods: {
            getData() {
                this.orderId = getQuery('id')
                if (this.orderId) {
                    this.detail()
                }
            },
            uploadUrl (imgPath) {
                uploadOrderImg(this.orderId, imgPath).then(res => {
                    if (res && res.code === 0) {
                        this.$alertTip('上传成功！')
                        window.location.reload()
                    }
                    else {
                        this.$alertTip(res.msg || '上传失败！')
                    }
                }, reject => {
                    this.$alertTip('上传失败！')
                })
            },
            detail () {
                getOrderDetail(this.orderId).then(res => {
                    if (res && res.code === 0) {
                        this.orderItem = res.data
                        let str = ''
                        switch (this.orderItem.status) {
                            case 1:
                                str = '未付款'
                                break
                            case 3:
                                str = '已发货'
                                break
                            case 0:
                                str = '已取消'
                                break
                            case 2:
                                str = '已付款'
                                break
                            case 4:
                                str = '已申请退货'
                                break
                            case 30:
                                str = '已申请，待审核'
                                break
                            case 31:
                                str = '已驳回'
                                break
                            case 32:
                                str = '已通过'
                                break
                            case 33:
                                str = '已退款'
                                break
                        }
                        this.orderItem.statusStr = str
                        let a = Date.parse(new Date()) / 1000
                        this.orderItem.diff = Math.ceil((a - this.orderItem.payTimeStamp) / 3600 / 24)
                    }
                    else {
                        this.$alertTip(res.msg || '获取订单详情失败！')
                    }
                }, reject => {
                    this.$alertTip('获取订单详情失败！')
                })
            },
            handleAvatarSuccess(res, file) {
                if (res && res.code === 0) {
                    let uploadPath = res.data
                    this.uploadUrl(uploadPath)
                }
                // 在这里处理图片上传～
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        components: {
            Order,
            orderBtn,
            QrcodeVue
        }
    }
</script>
<style lang="less">
    @import "../../css/common";

    html {
        height: 100%;
        body {
            height: 100%;
            background-color: #f8f8f8;
            #order_detial {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .order_detial_code {
                    background-color: white;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 330px;
                    .order_detial_image {
                        margin-top: 48px;
                        margin-bottom: 40px;
                        width: 180px;
                        height: 180px;
                    }
                    > span {
                        font-size: 28px;
                        color: #999999;
                    }
                }
                .order_account{
                    background-color: white;
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    padding: 1.066667rem 1.066667rem 0;
                    box-sizing: border-box;
                    margin: 0 0 0.666667rem;
                    .order_text {
                        display: inline-block;
                        font-size: 26px;
                        color: #999999;
                        width: 4.733333rem;
                        margin-bottom: 24px;
                        margin-right: 34px;
                        :last-child {
                            margin-bottom: 32px;
                        }
                    }
                    .order_content {
                        font-size: 28px;
                        color: #333333;
                    }
                }
                .order_voucher {
                    width: 100%;
                    height: 240px;
                    box-sizing: border-box;
                    padding: 0 32px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: white;
                    > img {
                        width: 120px;
                        height: 120px;
                    }
                    > span {
                        font-size: 28px;
                        color: #333333;
                    }
                }
                .order_detial_button {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 32px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: white;
                    display: flex;
                    justify-content: flex-end;
                    border-top: 1px solid #eaeaea;
                    height: 100px;
                    align-items: center;
                }
            }
        }
    }

    .btnfooter {
        position: fixed;
        width: 100%;
        bottom: 0px;
        paddingright: 16px;
        background-color: #fff;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .el-upload--text {
        width: 4rem;
        height: 4rem;
        border-radius: 6px;
        cursor: pointer;
    }

    .order_uploader_img {
        width: 4rem;
        height: 4rem;
        display: block;
    }
</style>